<template>
  <div>
    <!-- 顶部栏 -->
    <comp-header></comp-header>

    <div class="tt-content">
      <div class="container">
        <div class="content">
          <!-- 视图出口 -->
          <router-view />

          <div class="c-bottom">
            <div class="c-b-small">
              <div class="c-b-s-left">
                <p><i>&copy;</i>2010-2021 吾志</p>
                <p><router-link to="/home/webHomepage">wuzhi.me</router-link></p>
              </div>
              <div class="c-b-s-right">
                <span v-if="!isLogin"
                  ><a href="javascript:;">沪ICP备13000040号-5</a></span
                >
                <span><a @click="myPhone" href="javascript:;">手机版 </a> </span>
                <span><a @click="myUpdate" href="javascript:;">吾志更新 </a> </span>
                <span><router-link to="/home/webabout">关于吾志 </router-link> </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import compHeader from "@/components/comp-header.vue";
import { mapState } from "vuex";

export default {
  name: "webHome",
  components: { compHeader },
  data() {
    return {
      isCheck: "",
    };
  },
  methods:{
    myPhone(){
      alert("暂时未开放")
    },
    myUpdate(){
      alert("没什么好看的")
    }
  },
  computed: {
    ...mapState(["isLogin"]),
  },
  mounted() {
    // console.log("mounted");
    let _data = document.cookie;
    // console.log(_data);
    if (_data.length == 0) {
      return false;
    }
    // 排除其他cookie的影响
    if (_data.includes("isCheck") == false) {
      return false;
    }
    if (_data.includes("isCheck")) {
      let arr = _data.split(";")[1];
      // console.log(arr);
      this.isCheck = arr.split("=")[1];
      // console.log(isCheck);
    }
    if (this.isCheck == "Yes") {
      this.$store.state.isLogin = true;

      // 如果是已经在已经在myhomepage这个路由中，在进行判断跳转时会报错（路由名重复）
      // this.$router.push({path:"/home/myhomepage"})
    }
  }
};
</script>

<style lang="less" scoped>
.tt-content {
  width: 100%;
  .content {
    width: 100%;

    .c-bottom {
      width: 100%;
      padding-top: 40px;
      .c-b-small {
        width: 100%;
        border-top: 5px solid #8fa5ab;
        display: flex;
        justify-content: space-between;
        .c-b-s-left {
          p {
            color: #808080;
            i {
              font-size: 26px;
              vertical-align: middle;
            }
            &:nth-of-type(1) {
              margin: 10px 0 -2px;
            }
            a {
              color: #808080;
            }
          }
        }
        .c-b-s-right {
          padding-top: 15px;
          box-sizing: border-box;
          span {
            &:nth-of-type(1) {
              margin-right: 10px;
            }
            a {
              color: #808080;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>